<template>
    <Form class="login-form" ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
        <FormItem prop="phone" style="margin-bottom:40px">
            <Input class="photo-number" type="number" placeholder="请输入手机号" autocomplete="off" clearable v-model="form.phone" />
        </FormItem>
        <FormItem prop="captcha" style="margin-bottom:40px">
            <div class="captcha">
                <Input class="captcha-number" type="number" placeholder="输入短信验证码" autocomplete="off" clearable v-model="form.captcha" />
                <CountDownButton ref="countDown" @on-click="sendSmsCode" :autoCountDown="false" :loading="sending" :text="getSms" />
            </div>
        </FormItem>
        <Button class="login-btn" :disabled="processing" @click="handleSubmit" :loading="loading">{{btnLoginText}}</Button>
    </Form>
</template>
<script>
import { debuglog } from 'util';
import CountDownButton from "@/components/count-down/count-down-button";
export default {
    components: {
        CountDownButton
    },
    name: 'LoginForm',
    props: {
        phoneRules: {
            type: Array,
            default: () => {
                return [
                    { required: true, message: '手机号不能为空', trigger: 'blur' }
                ]
            }
        },
        captchaRules: {
            type: Array,
            default: () => {
                return [
                    { required: true, message: '验证码不能为空', trigger: 'blur' }
                ]
            }
        },
        processing: {
            type: Boolean,
            default: false
        },
        loading: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            sending: false,
            getSms: "获取短信验证码",
            form: {
                phone: '',
                captcha: ''
            }
        }
    },
    computed: {
        /**
         *
         */
        btnLoginText() {
            return this.processing ? "正在处理,请稍候..." : "立即登录";
        },

        /**
         *
         */
        rules() {
            return {
                phone: this.phoneRules,
                captcha: this.captchaRules
            }
        }
    },
    methods: {
        /**
         *
         */
        sendSmsCode() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.$Modal.info({
                        title: "抱歉，请获取完整版",
                        content: "支付链接: http://xpay.exrick.cn/pay?xboot"
                    });
                }
            });
        },

        /**
         *
         */
        handleSubmit() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.$emit('on-success-valid', {
                        phone: this.form.phone,
                        captcha: this.form.captcha
                    })
                }
            })
        }
    }
}
</script>
<style lang="less">
.photo-number {
    width: 320px;
}
.ivu-input-icon {
    height: 40px;
    line-height: 40px;
}
</style>
